// 我的页面

import './index.less';
import {Image, View} from "@tarojs/components";
import {GLOBAL_IMAGE} from "../../constant/contant";
import {Avatar, Logo, Menu, Name} from "../../components/userCenterCmpt";
import {LoginMask} from "../../components/LoginMask";
import {connect} from "react-redux";
import {API_PATH} from "../../api/api";
import {useLoginMask} from "../../hooks/useLoginMask";

function UserCenter(props) {
    const {reduxUserInfo, dispatch} = props;
    const [loginMask, closeLoginMask, openLoginMask, getUserInfo] = useLoginMask(dispatch);

    return (
        <View className={"userCenter"}>
            <View className={"logo_row"}>
                <Logo imgUrl={GLOBAL_IMAGE.logo1}/>
            </View>
            <View className={"avatar_row"}>
                <Avatar
                    dispatch={dispatch}
                    imgUrl={reduxUserInfo?.avatar ? API_PATH + reduxUserInfo.avatar : GLOBAL_IMAGE.default_avatar}
                    openLoginMask={openLoginMask}
                />
            </View>
            <View className={"user_menu"}>
                <View className={"name_row"}>
                    <Name
                        name={reduxUserInfo.nickName}
                        openLoginMask={openLoginMask}
                    />
                </View>
                <View className="menu_row">
                    <Menu openLoginMask={openLoginMask}/>
                </View>
            </View>
            <View className={"bg_bot"}>
                <Image src={GLOBAL_IMAGE.homepage_bot}/>
            </View>
            <LoginMask
                showLoginMask={loginMask}
                closeLoginMask={closeLoginMask}
                getUserInfo={getUserInfo}
            />
        </View>
    )
}

const mapStateToProps = (state) => ({
    reduxUserInfo: state.userState.reduxUserInfo
})

export default connect(mapStateToProps)(UserCenter);
